<template>
    <div class="component-picker-list">
        <input
            type="text"
            class="component-picker-list__input" 
            :id='pickerId' 
            :placeholder="placeholder" 
            :value='value'>
        <p 
            class="component-picker-list__text item"
            :class="{ 'placeholder':selectText === '' }" >{{ selectText || placeholder }}</p>
        
        <slot></slot>
    </div>
</template>

<script>
    import '../libs/mobiscroll/css/mobiscroll.min.css'
    import '../libs/mobiscroll/js/mobiscroll.js'
    import '../libs/mobiscroll/js/i18n/mobiscroll.i18n.zh.js'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        props:{
            value:[Array,Object,String,Number,Boolean],
            text:[String,Number],
            watchValue:{
                type: Boolean,
                default: false
            },
            pickerId:{
                type: String,
                default: 'picker-id'
            },
            list:{
                type: Array,
                default:[],
            },
            // auto:{
            //     type: Boolean,
            //     default:false,
            // },
            placeholder:{
                type: String,
                default:'请选择'
            },
            // multiple:{
            //     type: Boolean,
            //     default:false
            // },
            // maxHeight:{
            //     type: Number,
            //     default:0
            // },
        },
        data() {
            return {
                show_options:false,
                selectText:'',
                topPos:'',
                zIndex:1,
                scrollerInit:''
            }
        },
        computed:{
            ...mapGetters([
                'localInfo'
            ]),
            styleOptions(){
                let object = {}
                if(this.maxHeight){
                    object.maxHeight = `${this.maxHeight}px`
                }
                if(this.topPos){
                    object.top = `${this.topPos}px`
                }
                return object
            },
            documentClickBoolean(){
                return this.localInfo.documentClick
            },
            selectZIndex(){
                return this.localInfo.selectZIndex
            },
            zIndexStyle(){
                return {zIndex:this.zIndex}
            }
        },
        methods:{
            ...mapActions([
                'setDocumentClick',
                'setSelectZIndex',
                'setGoHome'
            ]),
            getText(value){
                let text = _.filter(this.list,(val,index)=>{
                    return this.value == val.value
                })
                if(text.length){
                    this.selectText = text[0].display
                }
                
            },
            changeValue(value,text){
                this.show_options = false
                this.$emit('input', {
                    value,
                    text
                });
            },
            selectValue(value,text){
                let isSelect = false
                _.each(this.values,(item,index)=>{
                    if(value == item.value){
                        this.values.splice(index,1)
                        isSelect = true
                        return false
                    }
                })
                if(!isSelect){
                    this.values.push({
                        value,
                        text
                    })
                }
                this.$emit('input', this.values);
                this.setTopPos()
            },
            removeValue(index){
                this.values.splice(index,1)
                this.setTopPos()
            },
            setTopPos(){
                this.$nextTick(()=>{
                    this.topPos = $(this.$refs.box).height() + 1
                })
            },
            toggleOptions(){
                this.show_options = !this.show_options
                if(this.show_options){
                    if(this.selectZIndex == 100){
                        this.zIndex = 1
                        this.setSelectZIndex(1)
                        this.setDocumentClick(false)
                        return
                    }
                    this.zIndex = this.selectZIndex+1
                    this.setSelectZIndex(this.selectZIndex+1)
                    this.setDocumentClick(false)
                }
                if(this.multiple && this.show_options){
                    this.setTopPos()
                }
            }
        },
        created() {
            this.getText(this.value)
        },
        mounted() {
            let self = this
            this.$nextTick(()=> {
                this.scrollerInit = mobiscroll.scroller(`#${this.pickerId}`, {
                    lang: 'zh',
                    display: 'bottom',
                    wheels: [
                        [{
                            label:'first',
                            circular: false,
                            data: this.list
                        }]
                    ],
                    minWidth: 500,
                    // onItemTap(event, inst){
                    //     let text = event.target.innerText
                    //     let value = _.filter(self.list,(val,index)=>{
                    //         return value == val.display
                    //     })
                    //     console.log(text)
                    //     console.log(self.selectText)
                    //     if(self.selectText == text){
                    //         console.log(1)
                    //         inst.select()
                    //         return
                    //     }
                    //     self.selectText = text
                    //     self.$emit('input',value)
                    // },
                    onSet(event, inst) {
                        let value = event.valueText
                        let text = _.filter(self.list,(val,index)=>{
                            return value == val.value
                        })
                        self.selectText = text[0].display
                        self.$emit('input',value)
                        self.$emit('done',value)
                    },
                    onBeforeShow(event, inst) {
                        self.setGoHome(false)
                    },
                    onBeforeClose(event, inst){
                        self.setGoHome(true)
                    }
                })
            })
        },
        destroyed(){
            this.scrollerInit.destroy()
        },
        watch: {
            value:function(newVal,oldVal){
                if(!this.watchValue) return
                this.scrollerInit.setVal(newVal)
                let text = _.filter(this.list,(val,index)=>{
                    return newVal == val.value
                })
                this.selectText = text[0].display
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-picker-list{
        display: flex;
        width: 100%;
        position: relative;
        align-items:center;
        padding-right: 24px;
        box-sizing:border-box;
    }
    .component-picker-list__input{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
        &.show{
            opacity:1;
        }
    }
    .component-picker-list__text{
        flex:1;
        padding-right:0px!important;
        color:$importColor;
        &.placeholder{
            color:$placeholderColor
        }
    }
</style>


